<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/common1.css">
    <link rel="stylesheet" href="../css/alert.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/aui-slide.css">
    <link rel="stylesheet" href="../css/goodsdetail.css">
</head>
<body>
<section>
    <header class="aui-bar aui-bar-nav" id="aui-header" style="position:fixed;">
        <div class="aui-col-xs-3 my-col-xs-3">
        	<i class="aui-iconfont aui-icon-left"></i>
        </div>
        <div class="aui-title my-aui-title">商品详情页</div>
    </header>
    <!--轮播图-->
    <div id="detail-content-box" style="margin-top:2rem;">
        <script type="text/x-handlebars-template" id="detail-template">
            {{#product}}
            <nav>
                <div id="aui-slide3">
                    <div class="aui-slide-wrap" >
                        {{#each (splitDetailImg bannerImageUrls)}}
                        <div class="aui-slide-node bg-dark">
                            <img src="{{name}}" alt="">
                        </div>
                        {{/each}}
                        <!--<div class="aui-slide-node bg-dark">
                            <img src="{{bannerImageUrls}}" alt="">
                        </div>
                        <div class="aui-slide-node bg-dark">
                            <img src="{{bannerImageUrls}}" alt="">
                        </div>-->
                    </div>
                    <div class="aui-slide-page-wrap"><!--分页容器--></div>
                </div>
            </nav>
            <section class="goodsdetail-detail">
                <p><!--<span class="redpack">红包{{productHongbao}}元</span>-->{{name}}</p>
                <div class="goods-detail-price">
                    <div>
                        <b class="goodsdetail-price">¥{{productPrice}}</b>
                        <s class="goodsdetail-price-del">¥{{productOrginPrice}}</s>
                    </div>
                    <div class="dis-evaluate now-generalize">
                        <div class="hj-redbao-price"><b>{{productHongbao}}</b>元</div>
                        <div class="dis-share" data-id="{{id}}"></div>
                    </div>
                    <!--<div class="now-generalize">立即分享</div>-->
                </div>

                <div class="goodsdetail-post">
                    <span>{{freight isFreePost}}</span>
                    <span>{{totalSales}}人购买</span>
                </div>
            </section>
            {{/product}}
        </script>
    </div>
    <!--详情和评价切换-->
    <section class="goodsdetail-switch">
        <section class="goodsdetail-switch-box">
            <div class="goodsdetail-sw-left goodsdetail-sw-rl goodsdetail-active1">
                <span class="ab goodsdetail-active">详情</span>
            </div>
            <div class="goodsdetail-sw-right goodsdetail-sw-rl">
                <span class="ab">评价</span>
            </div>
        </section>
    </section>
    <!--详情和评价具体内容-->
    <section class="goodsdetail-con">
        <!--详情图片-->
        <!--详情图片-->
        <div class="goodsdetail-con-detail">
            <script type="text/x-handlebars-template" id="goodsdetail-con-detail">
                {{#product}}
                {{#each (splitDetailImg detailImageUrls)}}
                <img src={{name}} alt="">
                {{/each}}
                {{/product}}
            </script>
        </div>
        <div class="cc">
            <!--全部和有图-->
            <div class="goodsdetail-con-whole">
                <script type="text/x-handlebars-template" id="imgNum">
                <div class="goodsdetail-whole-lr bor-r goodsdetail-active2" onclick="addclass(this)">
                    <span style="color: red">全部({{totalFeedbacks}})</span>
                </div>
                <div class="goodsdetail-whole-lr bor-l" onclick="addclass(this)">
                    <span>有图({{totalImageFeedbacks}})</span>
                </div>
                </script>
            </div>
            <!--全部和有图具体内容-->
            <div class="goodsdetail-whole-con">
                <!--全部-->
                <div class="whole">
                    <script type="text/x-handlebars-template" id="whole-ul">
                        {{#feedbacks}}
                        <ul>
                            <li>
                                <!--用户名和日期-->
                                <div class="user-date">
                                    <span>{{userId}}</span>
                                    <span>{{createTime}}</span>
                                </div>
                                <p>
                                    {{content}}
                                </p>
                                <!--图片-->
                                <div class="img-box">
                                    {{#each (splitDetailImg imageUrls)}}
                                    {{#if name}}
                                    <div class="passImg-detail-img">
                                        <a href="{{name}}" class="">
                                            <img src='{{name}}' alt="">
                                        </a>
                                    </div>
                                    {{/if}}
                                    {{/each}}
                                </div>
                                <!--商品信息-->
                                <span class="goods-detail">{{note}}</span>
                            </li>
                        </ul>
                        {{/feedbacks}}
                    </script>
                </div>
                <!--有图-->
                <div class="chooseimg" style="display: none;">
                    <script type="text/x-handlebars-template" id="chooseimg">
                        {{#feedbacks}}
                        <ul>
                            <li>
                                <!--用户名和日期-->
                                <div class="user-date">
                                    <span>{{userId}}</span>
                                    <span>{{createTime}}</span>
                                </div>
                                <p>{{content}}</p>
                                <!--图片-->
                                <div class="img-box">
                                    {{#each (splitDetailImg imageUrls)}}
                                    {{#if name}}
                                    <div class="passImg-detail-img">
                                        <a href="{{name}}" class="">
                                            <img src='{{name}}' alt="">
                                        </a>
                                    </div>
                                    {{/if}}
                                    {{/each}}
                                </div>
                                <!--商品信息-->
                                <span class="goods-detail">{{note}}</span>
                            </li>
                        </ul>
                        {{/feedbacks}}
                    </script>

                </div>
            </div>
        </div>
    </section>
    <section class="wxmass-sends">
        <section class="wxmass-sends-item">
            
            <ul class="wxmass-item-list">
                <li class="share-firends">
                    <div class="wxmass-item-list-img">
                        <img src="../images/wx.png" alt="">
                        <p style="text-align:center;">微信</p>
                    </div>
                   
                </li>
                <li class="share-firends-quan">
                    <div class="wxmass-item-list-img">
                        <img src="../images/friends.png" alt="">
                        <p style="text-align:center;">朋友圈</p>
                    </div>
                    
                </li>
            </ul>
            
            <div class="wxmass-item-title"> 取消分享 </div>
        </section>
    </section>
    <!--底部购物车-->
   <!-- <footer class="goodsdetail-footer">
        <div class="goodsdetail-footer-gwc"><img src="../images/gwc.png" alt=""></div>
        <div class="goodsdetail-footer-join"><span>加入购物车</span></div>
        <div class="goodsdetail-footer-buy"><span>立刻购买</span></div>
    </footer>-->
</section>
<section class="share-loading">
    <img src="../images/loading.gif" alt="">
</section>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/api.2.0.js"></script>
<script src="../js/aui-slide.js"></script>
<script src="../js/config.js"></script>
<script src="../js/alert.js"></script>
<script src="../js/function.js"></script>
<script src="../js/handlebars-v4.0.10.js"></script>
<script src="../js/common.js"></script>
<script src="../js/goods-detail.js"></script>
<script>

//    <!--详情和评价切换-->
    $('.goodsdetail-sw-rl').click(function () {
        $(this).addClass('goodsdetail-active1').find('.ab').addClass('goodsdetail-active');
        $(this).siblings().removeClass('goodsdetail-active1').find('.ab').removeClass('goodsdetail-active');
        var index=$(this).index();
        $(".goodsdetail-con > div").eq(index).show().siblings().hide();
    });


    //        <!--所有评价和图片评价切换-->
     function addclass(obj) {
         var $this=$(obj);
         $this.addClass('goodsdetail-active2').find('span').css('color','red');
         $this.siblings().removeClass('goodsdetail-active2').find('span').css('color','#1f1f1f');
         var index1=$this.index();
         $('.goodsdetail-whole-con>div').eq(index1).show().siblings().hide()
     }

     var ua = navigator.userAgent.toLowerCase();
	 
	    if (/iphone|ipad|ipod/.test(ua)) {
	       $("#aui-header").hide();
	       $("#detail-content-box").css('margin-top','0px')
	    } else {
	        //console.log(JSON.stringify(data));
	       
	        event.stopPropagation();
	    }
</script>
</body>
</html>